<template>
    <div class="released">
        <div class="container">
            <div class="wrapper">
                <div class="left-sidebar">
                    <ul class="navlist">
                        <li>
                            <a href="/#/user/userinfo">个人资料</a>
                        </li>
                        <li>
                            <i></i>
                            <a href="/#/user/released">我发布的</a>
                        </li>
                        <li>
                            <a href="/#/user/sold">我卖出的</a>
                        </li>
                        <li>
                            <a href="/#/user/bought">我买到的</a>
                        </li>
                        <li>
                            <a href="/#/user/collected">我收藏的</a>
                        </li>
                        <li>
                            <a href="/#/user/removed">已下架</a>
                        </li>
                    </ul>
                </div>
                <div class="article">
                    <form class="post">
                        <div class="title"><strong>我发布的</strong></div>
                        <div class="upload-content" v-for="(item,index) in product" :key="index">
                            <div class="product">
                                <div class="pro-img">
                                    <img v-bind:src="item.img" alt="">
                                </div>
                                <div class="pro-info">
                                    <div class="pro-name">{{item.name}}</div>
                                    <div class="pro-price"><strong>{{item.price}}</strong> 元</div>
                                    <div class="pro-browse">浏览 {{item.browse}} 次</div>
                                </div>
                                <div class="pro-operate">
                                    <a href="" class="btn">下架</a>
                                    <a href="" class="btn">编辑</a>
                                    <a href="" class="btn">删除</a>
                                </div>
                            </div>
                        </div>
                    </form>
                    <el-pagination
                        v-if="true"
                        class="pagination"
                        background
                        layout="prev, pager, next"
                        :pageSize="pageSize"
                        :total="total"
                        @current-change="handleChange"
                        >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Pagination } from 'element-ui'
export default {
    name:'released',
    components:{
        [Pagination.name]:Pagination
    },
    data(){
        return {
            pageSize:10,
            pageNum:1,
            total:0,
            showNextPage:true,//加载更多：是否显示按钮
            product:[
                {
                    img:'/images/book/gaoshu/book-1.jpg',
                    name:'高等数学（上）',
                    price:12,
                    browse:56
                },
                {
                    img:'/images/book/gaoshu/book-1.jpg',
                    name:'高等数学（上）',
                    price:15,
                    browse:43
                }
            ]
        }
    },
    methods:{
        handleChange(pageNum){
            this.pageNum = pageNum;
        }
    }
}
</script>
<style lang="scss">
    .released{
        font: 14px/1.5 "PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;
        background: #f6f6f6;
        .wrapper{
            display:flex;
            justify-content: space-between;
            .left-sidebar{
                width: 210px;
                height: 300px;
                background: #ffffff;
                border-radius: 4px;
                .navlist{
                    li{
                        height: 48px;
                        line-height: 48px;
                        padding: 0 20px;
                        font-size: 14px;
                        cursor: pointer;
                        position: relative;
                        display: flex;
                        flex-direction: row;
                        i{
                            display: inline-block;
                            position: absolute;
                            left: 0;
                            top: 10px;
                            width: 3px;
                            height: 32px;
                            background: #2b81bd;
                            vertical-align: middle;
                        }
                        a{
                            color: #333333;
                        }
                        &:hover{
                            background: #2b81bd;
                            border-radius: 4px;
                        }
                    }
                }
            }
            .article{
                width: 900px;
                margin-left: 20px;
                box-sizing: border-box;
                border-radius: 4px;
                .post{
                    .title{
                        border-radius: 4px;
                        width: 100%;
                        line-height: 65px;
                        padding: 0 30px;
                        background: #fff;
                        position: relative;
                        box-sizing: border-box;
                    }
                    .upload-content{
                        margin-top: 10px;
                        padding-bottom: 20px;
                        background: #ffffff;
                        border-radius: 4px;
                        height: 150px;
                        .product{
                            display: flex;
                            flex-direction: row;
                            border: 1px solid #d7d7d7;
                            .pro-img{
                                margin: 25px 50px;
                                img{
                                    width: 100px;
                                    height: 100px;
                                }
                            }
                            .pro-info{
                                width: 220px;
                                margin: 25px;
                                .pro-name{
                                    font-weight: bold;
                                }
                                .pro-price{
                                    color: red;
                                }
                                .pro-browse{
                                    font-weight: lighter;
                                    font-size: 12px;
                                    color: #cccccc;
                                }
                                div{
                                    margin-bottom: 15px;
                                }
                            }
                            .pro-operate{
                                a{
                                    margin: 55px 10px;
                                }
                            }
                        }
                    }
                }
                .pagination{
                    text-align:center;
                    display: block;
                    margin: 20px;
                }
            }
        }
    }
</style>